Hello, 各位 iT 邦幫忙 的粉絲們大家好~~~

在本系列文會延續 Re: 從零改用 .NET MAUI 技術來繼續過去用 Xamarin 技術開發的一個 App : TopStore 使用 .NET MAUI 技術所建立的 TopStore App ，更新 .NET MAUI 在 .NET 6 轉換到 .NET 7 時所需要調整的部分，並持續地的開發 TopStore App 其他需要的功能。

本篇是 Re: 從零續用 .NET MAUI 技術開發過去的一個 App : TopStore 系列 系列文的 EP02。

在 EP01 的測試時，發現目前在 iOS 的環境當中執行時，分頁頁籤的圖示似乎沒有呈現出來，其實是因為在 iOS 環境執行時，圖示的預設顏色為白色，整體看起來圖示並沒有呈現出來。

而在 PeoplePage、GoodsPage 當中的搜尋框，在預設背景顏色上也因為沒有設定，所以呈現效果看起來的整體效果跟其他平台的不太一致。

而在先前的 系列文 當中轉換成 Maui 的預設範本專案後，其預設的範本專案有設計一些相關的色彩資源，因此上述的圖示問題就來利用此色彩資源來調整吧！

首先，透過 Visual Studio 的方案總管中看到專案的 Resources 其中的 Styles 資料夾，打開 Colors.xaml 後可以注意到其中的 ResourceDictionary 標記內定義了很多 Color 的 Resource。

本 EP 會用到下圖紅框當中所定義的色彩資源：

如果有需要進一步了解 ResourceDictionary 的資料可以參考：

1. Microsoft Learn: .NET MAUI 基礎知識 - 資源字典
2. Microsoft Learn: ResourceDictionary 與 XAML 資源參考

由於已經定義好此色彩資源，所以就直接透過 StaticResource (靜態資源)來使用，既可以延續 Maui 的範本專案的設計，未來若要異動主題色彩時也能統一變更。

StaticResource 的相關認識可參考 (雖然是 WPF 的介紹，但觀念是一樣的)：
Microsoft Learn: StaticResource 標記延伸

由於是要變更分頁頁籤的圖示色彩，這是要在 AppShell.xaml
當中的 FontImageSource 標記當中增加 Color 屬性設定。

Color="{StaticResource Primary}"

完成後如下圖：

iOS 的執行結果呈現結果如下：

而前面提到 PeoplePage、GoodsPage 當中的搜尋框呈現問題，就直接打開 PeoplePage.xaml 、 GoodsPage.xaml 來做編輯。

同樣是透過 Colors.xaml 已經有設定色彩資源來設定，找到先前所撰寫的 SearchBar 標記，加入以下的 BackgroundColor 屬性設定：

BackgroundColor="{StaticResource White}"

完成後如下圖：

iOS 的執行結果呈現結果如下：